<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="c1" width="600" height="400">
        当前浏览器不支持canvas，请下载最新的浏览器
        <a href="https://www.google.cn/intl/zh-CN/chrome/">立即下载</a>
    </canvas>

    <script>
        /** @type {HTMLCanvasElement} **/
        var c1 = document.getElementById("c1");
        var ctx = c1.getContext("2d");
        
        ctx.beginPath();
        ctx.moveTo(200,200);
        ctx.bezierCurveTo(100,130,60,260,200,350);
        ctx.moveTo(200,200);
        ctx.bezierCurveTo(300,130,340,260,200,350);
        ctx.stroke();
        ctx.closePath();

        class Heart{
            constructor(x,y){
                this.x = x;
                this.y = y;
                this.color = 'red'
                this.heartPath = new Path2D();
                this.heartPath.moveTo(this.x,this.y);
                this.heartPath.bezierCurveTo(
                    this.x-100,
                    this.y-70,
                    this.x-140,
                    this.y+60,
                    this.x,
                    this.y+150);
                this.heartPath.moveTo(this.x,this.y);
                this.heartPath.bezierCurveTo(
                    this.x+100,
                    this.y-70,
                    this.x+140,
                    this.y+60,
                    this.x,
                    this.y+150);

                c1.onmousemove = (e) =>{
                let x = e.offsetX;
                let y = e.offsetY;
                let isIn =  ctx.isPointInPath(this.heartPath,x,y);
                if(isIn){
                    this.color = 'blue'
                    console.log('在')
                }else{
                    this.color = 'red'
                    console.log('不在')
                }
            }
            }




            draw(){
                ctx.save();
                ctx.fillStyle=this.color;
                ctx.fill(this.heartPath);

                ctx.restore();


            }

        }
        
        let heart = new Heart(100,100);
        function render() {
            ctx.clearRect(0,0,c1.width,c1.height);   
            heart.draw();
            requestAnimationFrame(render);
            
        }
        render();

    </script>
</body>
</html>